<template>
	<com-modal
	:title="title"
	:content="content"
	:visible="show"
	:bg-color="skinColor.color_bg_2"
	:title-color="skinColor.color_1"
	:content-color="skinColor.color_2"
	:confirm-text="confirmText"
	:cancel-text="cancelText"
	:cancel-show="cancelShow"
	@confirm="handleConfirm"
	@cancel="handleCancel"
	@hide="handleHide"></com-modal>
</template>

<script>
	import SkinColor from '@/assets/skin/index.js'
	export default {
		computed: {
			skinMode () {
				return this.$store.getters['setting/GET_SKIN_MODE']
			},
			skinColor () {
				return SkinColor[this.skinMode]
			}
		},
		data () {
			return {
				show: false,
				cancelShow: false,
				title: '',
				content: '',
				confirmText: '',
				cancelText: '',
				success: null,
				fail: null,
				complete: null
			}
		},
		methods: {
			handleConfirm () {
				this.success && this.success({confirm: true})
				this.complete && this.complete()
			},
			handleCancel () {
				this.success && this.success({confirm: false})
				this.complete && this.complete()
			},
			handleHide () {
				this.show = false
				this.fail && this.fail()
			},
			alert (data) {
				this.cancelShow = false
				this.open(data)
			},
			confirm (data) {
				this.cancelShow = true
				this.open(data)
			},
			open ({title, content, confirmText, cancelText, success, fail, complete}) {
				this.title = title || ''
				this.content = content || ''
				this.confirmText = confirmText || '确认'
				this.cancelText = cancelText || '取消'
				this.success = success
				this.fail = fail
				this.complete = complete
				this.show = true
			}
		}
	}
</script>

<style>
</style>